<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="custom-image" content="https://totemlife.cn/apps/public/trial-home-cover.jpg">
    <title>试验看板 - {{trial.trial_code}}</title>
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
    <style>
        .card-header-warning {
            background-color: #f8d7da;
        }
        .card-header-alert {
            background-color: #fff3cd;
        }
        .status-badge {
            position: absolute;
            top: 0;
            right: 0;
            margin: 8px;
        }
        .progress-bar-success {
            background-color: #28a745;
        }
        .progress-bar-warning {
            background-color: #ffc107;
        }
        .progress-bar-danger {
            background-color: #dc3545;
        }
        .section-title {
            padding-left: 10px;
            margin-bottom: 20px;
        }
        .info-item {
            border-bottom: 1px dashed #eee;
            padding: 5px 0;
        }
        .badge-counter {
            position: relative;
            top: -10px;
            left: -5px;
            font-size: 0.65em;
        }
        .subject-card {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
            margin-bottom: 20px;
        }
        .subject-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .warning-list {
            margin-top: 5px;
            padding-left: 20px;
        }
        .alert-list {
            margin-top: 5px;
            padding-left: 20px;
        }
        .tip-list {
            margin-top: 5px;
            padding-left: 20px;
        }
        .alert-item {
            color: #dc3545;
            font-size: 0.85em;
        }
        .warning-item {
            color: #ffc107;
            font-size: 0.85em;
        }
        .tip-item {
            color: #88b04b;
            font-size: 0.85em;
        }
        .group-section {
            margin-bottom: 20px;
            border-left: 3px solid #6c757d;
            padding-left: 15px;
        }
        .group-section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .card-meta {
            font-size: 0.85em;
            color: #6c757d;
        }
        .latest-update {
            background-color: #f8f9fa;
            padding: 8px;
            border-radius: 5px;
            margin-top: 10px;
        }
        .latest-update-title {
            font-weight: bold;
            font-size: 0.85em;
        }
        .latest-update-content {
            font-size: 0.85em;
            margin-top: 5px;
        }
        .supply-badge {
            font-size: 0.75em;
        }
        .supply-info {
            font-size: 0.85em;
            margin-top: 5px;
            padding: 5px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        .supply-item {
            border-bottom: 1px dashed #eee;
            padding: 3px 0;
        }
        /* 时间线相关样式 */
        .timeline {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
            font-size: 0.85em;
        }
        .timeline-item {
            display: flex;
            align-items: center;
            margin-right: 8px;
        }
        .timeline-connector {
            color: #6c757d;
            margin: 0 4px;
        }
        .timeline-date {
            font-weight: 500;
        }
        .timeline-label {
            background-color: #e9ecef;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.85em;
        }
        .progress-stats {
            display: flex;
            justify-content: space-between;
            color: #6c757d;
        }
        /* 标签页相关样式 */
        .nav-tabs .nav-link {
            border: none;
            border-radius: 0;
            color: #6c757d;
            position: relative;
        }
        .nav-tabs .nav-link.active {
            color: #0d6efd;
            font-weight: 500;
            border-bottom: 3px solid #0d6efd;
            background-color: transparent;
        }
        .nav-tabs .nav-item .badge {
            margin-left: 5px;
        }
        /* 移动端优化 */
        @media (max-width: 576px) {
            .nav-tabs {
                overflow-x: auto;
                flex-wrap: nowrap;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none; /* Firefox */
            }
            .nav-tabs::-webkit-scrollbar {
                display: none; /* Chrome */
            }
            .nav-tabs .nav-link {
                padding: 0.5rem 0.75rem;
            }
            .timeline {
                flex-direction: column;
                align-items: flex-start;
            }
            .timeline-item {
                margin-bottom: 4px;
            }
            .progress-stats {
                flex-direction: column;
                align-items: flex-start;
            }
            .group-badge-container {
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid py-4">
        <div class="row mb-4">
            <div class="col">
                <h2>
                    <a href="/apps/trial" class="text-decoration-none">临床研究支持</a>
                    <i class="bi bi-chevron-right"></i>
                    <a href="/apps/trial/admin/trials" class="text-decoration-none">试验管理</a>
                    <i class="bi bi-chevron-right"></i>
                    {{trial.trial_code}} - 试验看板
                </h2>
            </div>
            <div class="col-auto">
                <a href="/apps/trial/admin/trials/{{trial.id}}/subjects" class="btn btn-outline-primary">
                    <i class="fas fa-users me-1"></i>受试者管理
                </a>
            </div>
        </div>

        <!-- 水平标签页导航 -->
        <ul class="nav nav-tabs mb-4" id="subjectsTab" role="tablist">
            <!-- 待分组人员标签 -->
            {{#if groupedSubjects.waitingForGroup.length}}
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="waiting-tab" data-bs-toggle="tab" data-bs-target="#waiting-content" type="button" role="tab" aria-controls="waiting-content" aria-selected="true">
                    待分组人员 <span class="badge bg-warning">{{counts.waitingForGroup}}</span>
                </button>
            </li>
            {{/if}}

            <!-- 已分组人员标签 -->
            {{#if counts.inGroup}}
            <li class="nav-item" role="presentation">
                <button class="nav-link {{#unless groupedSubjects.waitingForGroup.length}}active{{/unless}}" id="grouped-tab" data-bs-toggle="tab" data-bs-target="#grouped-content" type="button" role="tab" aria-controls="grouped-content" aria-selected="{{#unless groupedSubjects.waitingForGroup.length}}true{{else}}false{{/unless}}">
                    已分组人员 <span class="badge bg-success">{{counts.inGroup}}</span>
                </button>
            </li>
            {{/if}}

            <!-- 已报名人员标签 -->
            {{#if groupedSubjects.registered.length}}
            <li class="nav-item" role="presentation">
                <button class="nav-link {{#unless groupedSubjects.waitingForGroup.length}}{{#unless counts.inGroup}}active{{/unless}}{{/unless}}" id="registered-tab" data-bs-toggle="tab" data-bs-target="#registered-content" type="button" role="tab" aria-controls="registered-content" aria-selected="{{#unless groupedSubjects.waitingForGroup.length}}{{#unless counts.inGroup}}true{{else}}false{{/unless}}{{else}}false{{/unless}}">
                    已报名人员 <span class="badge bg-info">{{counts.registered}}</span>
                </button>
            </li>
            {{/if}}

            <!-- 出组人员标签 -->
            {{#if groupedSubjects.exited.length}}
            <li class="nav-item" role="presentation">
                <button class="nav-link {{#unless groupedSubjects.waitingForGroup.length}}{{#unless counts.inGroup}}{{#unless groupedSubjects.registered.length}}active{{/unless}}{{/unless}}{{/unless}}" id="exited-tab" data-bs-toggle="tab" data-bs-target="#exited-content" type="button" role="tab" aria-controls="exited-content" aria-selected="false">
                    出组人员 <span class="badge bg-secondary">{{counts.exited}}</span>
                </button>
            </li>
            {{/if}}

            <!-- 试验关注人员标签 -->
            {{#if groupedSubjects.watching.length}}
            <li class="nav-item" role="presentation">
                <button class="nav-link {{#unless groupedSubjects.waitingForGroup.length}}{{#unless counts.inGroup}}{{#unless groupedSubjects.registered.length}}{{#unless groupedSubjects.exited.length}}active{{/unless}}{{/unless}}{{/unless}}{{/unless}}" id="watching-tab" data-bs-toggle="tab" data-bs-target="#watching-content" type="button" role="tab" aria-controls="watching-content" aria-selected="false">
                    试验关注人员 <span class="badge bg-secondary">{{counts.watching}}</span>
                </button>
            </li>
            {{/if}}
        </ul>

        <!-- 标签页内容 -->
        <div class="tab-content" id="subjectsTabContent">
            <!-- 待分组人员内容 -->
            {{#if groupedSubjects.waitingForGroup.length}}
            <div class="tab-pane fade show active" id="waiting-content" role="tabpanel" aria-labelledby="waiting-tab">
                <div class="row">
                    {{#each groupedSubjects.waitingForGroup as |subject|}}
                        {{> progress subject=subject}}
                    {{/each}}
                </div>
            </div>
            {{/if}}

            <!-- 已分组人员内容 -->
            {{#if counts.inGroup}}
            <div class="tab-pane fade {{#unless groupedSubjects.waitingForGroup.length}}show active{{/unless}}" id="grouped-content" role="tabpanel" aria-labelledby="grouped-tab">
                <!-- 分组内部的二级标签导航 -->
                <ul class="nav nav-pills mb-3 mt-3" id="groupsTab" role="tablist">
                    {{#each groupedSubjects.inGroup as |group index|}}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{#if (eq index 0)}}active{{/if}}"
                                id="group-{{group.type}}-tab"
                                data-bs-toggle="pill"
                                data-bs-target="#group-{{group.type}}-content"
                                type="button" role="tab"
                                aria-controls="group-{{group.type}}-content"
                                aria-selected="{{#if (eq index 0)}}true{{else}}false{{/if}}">
                            <span class="badge" style="background-color: {{#if (eq group.type 1)}}#28a745{{else if (eq group.type 2)}}#dc3545{{else}}#6c757d{{/if}}">
                                {{group.name}}
                            </span>
                            <span class="badge bg-secondary">{{group.subjects.length}}人</span>
                        </button>
                    </li>
                    {{/each}}
                </ul>

                <!-- 分组内部的二级标签内容 -->
                <div class="tab-content" id="groupsTabContent">
                    {{#each groupedSubjects.inGroup as |group index|}}
                    <div class="tab-pane fade {{#if (eq index 0)}}show active{{/if}}"
                         id="group-{{group.type}}-content"
                         role="tabpanel"
                         aria-labelledby="group-{{group.type}}-tab">
                        <div class="row">
                            {{#each group.subjects as |subject|}}
                                {{> progress subject=subject}}
                            {{/each}}
                        </div>
                    </div>
                    {{/each}}
                </div>
            </div>
            {{/if}}

            <!-- 已报名人员内容 -->
            {{#if groupedSubjects.registered.length}}
            <div class="tab-pane fade {{#unless groupedSubjects.waitingForGroup.length}}{{#unless counts.inGroup}}show active{{/unless}}{{/unless}}" id="registered-content" role="tabpanel" aria-labelledby="registered-tab">
                <div class="row">
                    {{#each groupedSubjects.registered as |subject|}}
                        {{> progress subject=subject}}
                    {{/each}}
                </div>
            </div>
            {{/if}}

            <!-- 出组人员内容 -->
            {{#if groupedSubjects.exited.length}}
            <div class="tab-pane fade {{#unless groupedSubjects.waitingForGroup.length}}{{#unless counts.inGroup}}{{#unless groupedSubjects.registered.length}}show active{{/unless}}{{/unless}}{{/unless}}" id="exited-content" role="tabpanel" aria-labelledby="exited-tab">
                <div class="row">
                    {{#each groupedSubjects.exited as |subject|}}
                        {{> progress subject=subject}}
                    {{/each}}
                </div>
            </div>
            {{/if}}

            <!-- 试验关注人员内容 -->
            {{#if groupedSubjects.watching.length}}
            <div class="tab-pane fade {{#unless groupedSubjects.waitingForGroup.length}}{{#unless counts.inGroup}}{{#unless groupedSubjects.registered.length}}{{#unless groupedSubjects.exited.length}}show active{{/unless}}{{/unless}}{{/unless}}{{/unless}}" id="watching-content" role="tabpanel" aria-labelledby="watching-tab">
                <div class="row">
                    {{#each groupedSubjects.watching as |subject|}}
                        {{> progress subject=subject}}
                    {{/each}}
                </div>
            </div>
            {{/if}}
        </div>
    </div>

    {{> profile}}

    <!-- 将所有JS文件移到这里，并添加defer属性 -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
    <script src="/apps/js/wx-client-dom.js" defer></script>
    <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
    <script src="/apps/js/open-oss-img-in-modal.js" defer></script>

    <script>
        // 当页面加载完成时执行的函数
        document.addEventListener('DOMContentLoaded', function() {
            // 根据URL中的锚点自动切换到对应标签页
            if (window.location.hash) {
                const hash = window.location.hash.substring(1);
                const tabId = hash + '-tab';
                const tab = document.getElementById(tabId);

                if (tab) {
                    new bootstrap.Tab(tab).show();
                    setTimeout(() => {
                        window.scrollTo(0, 0);
                    }, 100);
                }
            }

            // 当标签页切换时更新URL锚点
            const tabs = document.querySelectorAll('#subjectsTab .nav-link');
            tabs.forEach(tab => {
                tab.addEventListener('shown.bs.tab', function(event) {
                    const id = event.target.id.replace('-tab', '');
                    history.replaceState(null, null, '#' + id);
                });
            });

            // 在移动设备上，滚动到当前活动的标签
            function scrollToActiveTab() {
                if (window.innerWidth <= 576) {
                    const activeTab = document.querySelector('#subjectsTab .nav-link.active');
                    if (activeTab) {
                        const tabsContainer = document.querySelector('#subjectsTab');
                        tabsContainer.scrollLeft = activeTab.offsetLeft - 20;
                    }
                }
            }

            // 页面加载和窗口大小变化时执行
            scrollToActiveTab();
            window.addEventListener('resize', scrollToActiveTab);
        });
    </script>
</body>
</html>
